<template>
  <div class="stepitem base_set">
    <!--分层设置-->
    <div class="checkboxitem">
      <label>环节设置</label>
      <ul class="checkbox">
        <li class="selected" style="opacity:0.6">标注环节</li>
        <li @click="edit == false && checktype()" :class="{'selected':checkStatus==true}">检查环节</li>
        <li @click="edit == false && testtype()" :class="{'selected':testStatus==true}">质检环节</li>
      </ul>
    </div>
    <!--检查环节的设置-->
    <div class="checkhide" v-show="checkStatus">
      <div class="hideline">
        <label>检查数据类型</label>
        <div class="typeli">
          <span @click="changeCType(1)" :class="{'hover':checkType==1}">所有数据</span>
          <span @click="changeCType(2)" :class="{'hover':checkType==2}">好数据</span>
          <span @click="changeCType(3)" :class="{'hover':checkType==3}">坏数据</span>
        </div>
      </div>
      <div class="hideline">
        <label>检查比例设置</label>
        <div class="typeli">
          <input type="number" v-model="checkVal" />
          <i>(%百分比,最低比例不可为0)</i>
        </div>
      </div>
    </div>
    <!--质检环节的设置-->
    <div class="checkhide" v-show="testStatus">
      <div class="hideline">
        <label>质检数据类型</label>
        <div class="typeli">
          <span @click="changeTType(1)" :class="{'hover':testType==1}">所有数据</span>
          <span @click="changeTType(2)" :class="{'hover':testType==2}">好数据</span>
          <span @click="changeTType(3)" :class="{'hover':testType==3}">坏数据</span>
        </div>
      </div>
      <div class="hideline">
        <label>质检比例设置</label>
        <div class="typeli">
          <input type="number" v-model="testVal" />
          <i>(%百分比,最低比例不可为0)</i>
        </div>
      </div>
    </div>
        <div class="title">属性设置</div>
    <div class="checkboxitem">
      <label>属性</label>
      <ul class="checkbox" v-if="!property">
        <li @click="layer4" :class="{'selected' : layerstatus4 == true}">属性层</li>
      </ul>
      <ul class="checkbox" v-if="property">
        <li @click="layer4" :class="{'selected':layerstatus4 == true}">属性层</li>
      </ul>
    </div>
    <div class="tag" v-show="layerstatus4==true">
      <label>属性设置</label>
      <div class="taglist">
        <span v-for="(item, index) in propertyListArr" :key="index" :data-index="index">{{item.cname}}
          <i v-if="item.edit" @click="deleteProperty(index)"></i>
        </span>
        <a @click="addProperty" v-if="propertyListArr.length < 50">添加属性</a>
      </div>
    </div>
    <div class="title">文本标签设置</div>
    <div class="checkboxitem">
      <label>标签层配置</label>
      <ul class="checkbox" v-if="!label">
        <li @click="layer3" :class="{'selected':layerstatus3==true}">标签层</li>
      </ul>
      <ul class="checkbox" v-if="label">
        <li @click="layer3" :class="{'selected':layerstatus3==true}">标签层</li>
      </ul>
    </div>
    <div class="tag" v-show="layerstatus3==true">
      <label>标签设置</label>
      <div class="taglist">
        <span v-for="(item,index) in tagListArr" :data-index="index" :key="index">{{item.cname}}
          <i v-if="item.edit" @click="deleteTag(index)"></i>
        </span>
        <a @click="addTag" v-if="tagListArr.length < 50">添加标签</a>
      </div>
    </div>
    <div class="title">数据导入</div>
    <div class="radioitem">
      <label>数据导入</label>
      <ul class="radio">
        <li :type="edit==true?'cursor':''" @click="edit==false && selectImpType(0)" :class="{'selected':importType==0}">云盘导入</li>
      </ul>
    </div>
    <div class="tb-lt" v-show="myrid!=''">
      <div class="btn-lf" style="display:none">
        <a @click="edit==false && deleteMyrid()">全部删除</a>
      </div>
      <dl class="file">
        <dt>
          <ul>
            <li>文件名称</li>
            <li>操作</li>
          </ul>
        </dt>
        <dd>
          <ul>
            <li>{{selectFileName}}</li>
            <li>
              <a :type="edit==true?'cursor':''" @click="edit==false && deleteMyrid()">删除</a>
            </li>
          </ul>
        </dd>
      </dl>
    </div>
    <div class="pop" v-show="importBox">
      <div class="layer"></div>
      <div class="show_pop bdradius">
        <div class="poptitle">
          <i @click="cancel"></i>
          <span class="fs14_bold">云盘导入</span>
        </div>
        <div class="myloc">
          <a @click="locBakTree()">根目录&gt;</a>
          <a v-for="(item,index) in selectTree" class="ainimate" @click="locBakTree(index+1,item.rid,item.name)" :key="item+item.rid">{{item.name}}&gt;</a>
        </div>
        <div class="tree">
          <ul>
            <li v-for="item in fileList" :class="{'current':selectFileRid==item.rid}" :key="item+item.rid">
              <i v-show="item.type!='file'" @click="changefile(item.rid,item.name,item.type)"></i>
              <div class="father" @click="openTree(item.rid,item.name)">
                <em style="display:none"></em>
                {{item.name}}
              </div>
            </li>
          </ul>
        </div>
        <div class="btngroup">
          <a class="yes" @click="saveTree">确定</a>
          <a class="last" @click="cancel">取消</a>
        </div>
      </div>
    </div>
    <transition name="fade">
      <div class="add_outtag_box" v-if="propertyBox">
        <div class="addtagbox">
          <div class="tagitem">
            <label>属性名称</label><input type="text" name="cname" placeholder="请输入属性名称" @focus="monitor($event)" v-model="propertyInfo.cname">
          </div>
          <div class="tagitem">
            <label>英文名称</label><input type="text" name="ename" placeholder="请输入英文名称" @focus="monitor($event)" v-model="propertyInfo.ename">
          </div>
          <div class="addtag">
            <span class="yes" @click="saveProperty">确定</span>
            <span class="no" @click="cancel">取消</span>
          </div>
        </div>
      </div>
    </transition>
      <transition name="fade">
        <div class="add_outtag_box" v-if="tagBox">
            <div class="addtagbox" >
              <div class="tagitem">
                <label>标签名称</label><input type="text" name="cname" placeholder="请输入标签名称" v-on:focus="monitor($event)" v-model="tagInfo.cname">
              </div>
              <div class="tagitem">
                <label>英文名称</label><input type="text" name="ename" placeholder="请输入英文名称" v-on:focus="monitor($event)" v-model="tagInfo.ename">
              </div>
              <div class="addtag">
                <span class="yes" @click="save">确定</span>
                <span class="no" @click="cancel">取消</span>
              </div>
            </div>
        </div>
      </transition>
  </div>
</template>
<script>
export default {
    name: "BaseSetting",
    data() {
        return {
            edit: false,
            tagInfo: {
                //标签添加框
                cname: "",
                ename: ""
            },
            info: {
                languageType: "", // 语言类型
                languageList: []
            },
            tagBox: false, //标签添加框是否显示
            layerBox: true, //分层设置是否显示
            layerstatus1: true, //内容层
            layerstatus2: true, //拼音层
            layerstatus3: false, //标签层
            layerstatus4: false,
            importType: 3, //数据导入方式
            importBox: false,
            importStatus: true, //是否允许继续打开目录
            fileList: [],
            myrid: "", //需要提交的rid
            selectTree: [],
            selectFileRid: "",
            selectFileName: "",
            chooseType: 1, //选择标签类型
            checkedReg: false, //是否开启规整层
            checkStatus: false, //是否检查
            checkType: 1, //检查数据类型
            checkVal: 100, //检查比例
            testStatus: false, //是否质检
            testType: 1, //质检数据类型
            testVal: 100, //质检比例
            exchangeStatus: true, //是否积分换算
            exchangeVal: 1, //积分换算比例
            textareaStatus: 0, //0:未超限，1:超限 显示原因
            textareaValue: "",
            /////
            property: false,
            label: false,
            propertyListArr: [],
            tagListArr: [],
            propertyBox: false, //属性添加框是否显示
            propertyInfo: {
                //标签添加框
                cname: "",
                ename: ""
            }
        };
    },
    props: ["editBaseData"],
    created() {
        if (this.editBaseData) {
            // this.info.languageType = this.editBaseData.info.languageType;
            // this.tagBox = this.editBaseData.tagBox;
            // this.layerBox = this.editBaseData.layerBox;
            // this.layerstatus1 = this.editBaseData.layerstatus1;
            // this.layerstatus2 = this.editBaseData.layerstatus2;
            // this.layerstatus3 = this.editBaseData.layerstatus3;
            // this.importType = this.editBaseData.importType;
            // this.importBox = this.editBaseData.importBox;
            // this.importStatus = this.editBaseData.importStatus;
            // this.myrid = this.editBaseData.myrid;
            // this.selectFileRid = this.editBaseData.selectFileRid;
            // this.selectFileName = this.editBaseData.selectFileName;
            // this.chooseType = this.editBaseData.chooseType;
            // this.checkedReg = this.editBaseData.checkedReg;
            // this.checkStatus = this.editBaseData.checkStatus;
            // this.checkType = this.editBaseData.checkType;
            // this.checkVal = this.editBaseData.checkVal;
            // this.testStatus = this.editBaseData.testStatus;
            // this.testType = this.editBaseData.testType;
            // this.testVal = this.editBaseData.testVal;
            // this.exchangeStatus = this.editBaseData.exchangeStatus;
            // this.exchangeVal = this.editBaseData.exchangeVal;
            // this.textareaStatus = this.editBaseData.textareaStatus;
            // this.textareaValue = this.editBaseData.textareaValue;
        }
    },
    watch: {
      editBaseData(val){
        console.log(val,'editBaseDataeditBaseDataeditBaseData' )
        Object.keys(val).forEach(key => {
          if(this.$data.hasOwnProperty(key)){
            this.$set(this, key, val[key])
          }
        })
      }
    },
    methods: {
        saveProperty: function() {
            var reg = /^[A-Za-z0-9\-\u4e00-\u9fa5]+$/;
            if (this.propertyInfo.cname == "") {
                if (!$("input[name=cname]").hasClass("err")) {
                    $("input[name=cname]")
                        .removeClass("yes")
                        .addClass("err")
                        .after("<div class='error'>中文名称不能为空</div>");
                }
                return;
            } else if (
                this.propertyInfo.cname.length > 50 ||
                this.propertyInfo.cname.length < 1
            ) {
                if (!$("input[name=cname]").hasClass("err")) {
                    $("input[name=cname]")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error'>中文名称不能超过50个字符</div>"
                        );
                }
                return;
            } else if (!reg.test(this.propertyInfo.cname)) {
                if (!$("input[name=cname]").hasClass("err")) {
                    $("input[name=cname]")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error'>只支持中英文、数字和-</div>"
                        );
                }
                return;
            } else if (this.propertyInfo.ename == "") {
                if (!$("input[name=ename]").hasClass("err")) {
                    $("input[name=ename]")
                        .removeClass("yes")
                        .addClass("err")
                        .after("<div class='error'>英文名称不能为空</div>");
                }
                return;
            } else if (
                this.propertyInfo.ename.length > 50 ||
                this.propertyInfo.ename.length < 1
            ) {
                if (!$("input[name=ename]").hasClass("err")) {
                    $("input[name=ename]")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error'>英文名称不能超过50个字符</div>"
                        );
                }
                return;
            } else if (!reg.test(this.propertyInfo.ename)) {
                if (!$("input[name=ename]").hasClass("err")) {
                    $("input[name=ename]")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error'>只支持中英文、数字和-</div>"
                        );
                }
                return;
            } else {
                var flag = true,
                    mytag = 0;
                for (var i = 0; i < this.propertyListArr.length; i++) {
                    var taglist = this.propertyListArr;
                    if (taglist[i].cname == this.propertyInfo.cname) {
                        flag = false;
                        mytag = 1;
                        break;
                    }
                    if (taglist[i].ename == this.propertyInfo.ename) {
                        flag = false;
                        mytag = 2;
                        break;
                    }
                }
                if (flag) {
                    var newdata = new Object();
                    newdata.cname = this.propertyInfo.cname;
                    newdata.ename = this.propertyInfo.ename;
                    newdata.edit = this.propertyInfo.edit = true;
                    this.propertyListArr.push(newdata);
                    this.propertyBox = false;
                    this.propertyInfo.cname = "";
                    this.propertyInfo.ename = "";
                } else {
                    if (mytag == 1) {
                        if (!$("input[name=cname]").hasClass("err")) {
                            $("input[name=cname]")
                                .removeClass("yes")
                                .addClass("err")
                                .after(
                                    "<div class='error'>当前标签已存在</div>"
                                );
                        }
                        return;
                    } else {
                        if (!$("input[name=ename]").hasClass("err")) {
                            $("input[name=ename]")
                                .removeClass("yes")
                                .addClass("err")
                                .after(
                                    "<div class='error'>当前标签已存在</div>"
                                );
                        }
                        return;
                    }
                }
            }
        },
        deleteProperty: function(n) {
            this.propertyListArr.splice(n, 1);
        },
        addProperty: function() {
            this.propertyBox = true;
        },
        layer4: function() {
            if (this.layerstatus4) {
                this.layerstatus4 = false;
                this.propertyListArr = [];
            } else {
                this.layerstatus4 = true;
            }
        },
        checktype: function() {
            this.checkStatus = !this.checkStatus;
        },
        testtype: function() {
            this.testStatus = !this.testStatus;
        },
        //检查质检设置
        changeCS: function(flag) {
            this.checkStatus = flag;
            this.changecoe("mark");
            this.changecoe("check");
        },
        changeTS: function(flag) {
            this.testStatus = flag;
        },
        changeEC: function(flag) {
            this.exchangeStatus = flag;
            if (!flag) {
                this.exchangeVal = 1;
            }
        },
        changeCType: function(n) {
            this.checkType = n;
        },
        changeTType: function(n) {
            this.testType = n;
        },

        addTag: function(key) {
            this.tagBox = true;
            this.curKey = key;
            // console.log(this.tagListArr)
        },
        cancel: function() {
            this.propertyBox = false;
            this.propertyInfo.cname = "";
            this.propertyInfo.ename = "";
            this.tagBox = false;
            this.importBox = false;
            this.tagInfo.cname = "";
            this.tagInfo.ename = "";
        },
        deleteMyrid: function() {
            this.myrid = "";
        },
        monitor: function(e) {
            var ev = e.currentTarget;
            if ($(ev).hasClass("err")) {
                $(ev)
                    .removeClass("err")
                    .addClass("yes");
            }
            $(ev)
                .next(".error")
                .remove();
        },
        save: function() {
            var reg = /^[A-Za-z0-9\-\u4e00-\u9fa5<>]+$/;
            if (this.tagInfo.cname == "") {
                if (!$("input[name=cname]").hasClass("err")) {
                    $("input[name=cname]")
                        .removeClass("yes")
                        .addClass("err")
                        .after("<div class='error'>中文名称不能为空</div>");
                }
                return;
            } else if (
                this.tagInfo.cname.length > 50 ||
                this.tagInfo.cname.length < 1
            ) {
                if (!$("input[name=cname]").hasClass("err")) {
                    $("input[name=cname]")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error'>中文名称不能超过50个字符</div>"
                        );
                }
                return;
            } else if (this.tagInfo.ename == "") {
                if (!$("input[name=ename]").hasClass("err")) {
                    $("input[name=ename]")
                        .removeClass("yes")
                        .addClass("err")
                        .after("<div class='error'>英文名称不能为空</div>");
                }
                return;
            } else if (
                this.tagInfo.ename.length > 50 ||
                this.tagInfo.ename.length < 1
            ) {
                if (!$("input[name=ename]").hasClass("err")) {
                    $("input[name=ename]")
                        .removeClass("yes")
                        .addClass("err")
                        .after(
                            "<div class='error'>英文名称不能超过50个字符</div>"
                        );
                }
                return;
            } else {
                var flag = true,
                    mytag = 0;
                for (var i = 0; i < this.tagListArr.length; i++) {
                    var taglist = this.tagListArr;
                    if (taglist[i].cname == this.tagInfo.cname) {
                        flag = false;
                        mytag = 1;
                        break;
                    }
                    if (taglist[i].ename == this.tagInfo.ename) {
                        flag = false;
                        mytag = 2;
                        break;
                    }
                }
                if (flag) {
                    var newdata = new Object();
                    newdata.cname = this.tagInfo.cname;
                    newdata.ename = this.tagInfo.ename;
                    newdata.edit = this.tagInfo.edit = true;
                    this.tagListArr.push(newdata);
                    this.tagBox = false;
                    this.tagInfo.cname = "";
                    this.tagInfo.ename = "";
                } else {
                    if (mytag == 1) {
                        if (!$("input[name=cname]").hasClass("err")) {
                            $("input[name=cname]")
                                .removeClass("yes")
                                .addClass("err")
                                .after(
                                    "<div class='error'>当前标签已存在</div>"
                                );
                        }
                        return;
                    } else {
                        if (!$("input[name=ename]").hasClass("err")) {
                            $("input[name=ename]")
                                .removeClass("yes")
                                .addClass("err")
                                .after(
                                    "<div class='error'>当前标签已存在</div>"
                                );
                        }
                        return;
                    }
                }
            }
        },
        deleteTag: function(n) {
            this.tagListArr.splice(n, 1);
        },
        checkReg: function() {
            this.checkedReg = !this.checkedReg;
        },
        locBakTree: function(index, rid) {
            if (index == "" || index == undefined || index == null) {
                this.selectTree = [];
                this.myrid = "";
                this.getFileTree("", "css");
            } else {
                this.selectTree.splice(index, this.selectTree.length);
                this.myrid = rid;
                this.getFileTree(rid, "css");
            }
        },
        openTree: function(rid, name) {
            this.getFileTree(rid, "css", name);
        },
        changefile: function(rid, name, type) {
            if (type != "file") {
                this.selectFileRid = rid;
                this.selectFileName = name;
            } else {
                //音频文件不可选，只能选文件夹
            }
        },
        async getFileTree(path, type, name) {
            var self = this;
            let params = {
                type,
                fileType: 0
            };
            if (path == "") {
                params.path = "";
                // proxyurl = "/v1/be/common/files?path= ;
            } else {
                params.path = { rid: path };
                // '/v1/be/common/files?path={"rid":"' + path + '"}'
            }
            if (this.importStatus) {
                this.importStatus = false;
                await this.ass_api.getCloudInfo(params).then(data => {
                    if (!data) return;
                    self.importStatus = true;
                    if (data.length > 0) {
                        self.fileList = data;
                        if (name != "" && name != null && name != undefined) {
                            var newdata = new Object();
                            newdata.rid = path;
                            newdata.name = name;
                            self.selectTree.push(newdata);
                            self.myrid = "";
                        }
                    } else {
                        self.ui.fade("当前目录没有可打开的文件");
                    }
                });
            }
        },
        saveTree: function() {
            if (this.selectFileRid != "") {
                this.myrid = this.selectFileRid;
                this.importBox = false;
                this.selectTree = [];
                this.selectFileRid = "";
            } else {
                console.log("没选择云盘");
            }
        },
        selectImpType: function(n) {
            this.importType = n;
            if (n == 0) {
                this.importBox = true;
                this.getFileTree("", "css");
            } else {
                this.importBox = false;
            }
        },
        selectlayer: function(flag) {
            this.layerBox = flag;
        },
        layer1: function() {
            if (this.layerstatus1) {
                this.layerstatus1 = false;
            } else {
                this.layerstatus1 = true;
            }
        },
        layer2: function() {
            if (this.layerstatus2) {
                this.layerstatus2 = false;
            } else {
                this.layerstatus2 = true;
            }
        },
        layer3: function() {
            if (this.layerstatus3) {
                this.layerstatus3 = false;
                this.tagListArr = [];
            } else {
                this.layerstatus3 = true;
            }
        },
        GetQueryString: function(name) {
            //流转任务时获取batchid
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        closeResult() {
            window.location.href = "/manager/index/batch";
        }
    },
    mounted: function() {
        var self = this;
        // var url = "/v1/dictionary/dicNameList";
        this.property = false;
        this.label = false;
        if (this.propertyListArr.length == 0) {
            this.property = true;
        } else if (this.edit == null || this.edit == undefined) {
            this.property = true;
        }
        if (this.tagListArr.length == 0) {
            this.label = true;
        } else if (this.edit == null || this.edit == undefined) {
            this.label = true;
        }
        // if(baseData.propertyListArr.length>0 && specData.edit == 'true'){//添加属性，已存在的标签不能删除
        //     for(var i=0;i<baseData.propertyListArr.length;i++){
        //         Vue.set(baseData.propertyListArr[i],'edit',false)
        //         for(var n=0;n<baseData.propertyListArr[i].length;n++){
        //             Vue.set(baseData.propertyListArr[i],'edit',false)
        //         }
        //     }
        // }else if(specData.edit == null || specData.edit == undefined || specData.edit == ''){
        //     for(var i=0;i<baseData.propertyListArr.length;i++){
        //         Vue.set(baseData.propertyListArr[i],'edit',true)
        //         for(var n=0;n<baseData.propertyListArr[i].length;n++){
        //             Vue.set(baseData.propertyListArr[i],'edit',true)
        //         }
        //     }
        // };
        // if(baseData.tagListArr.length>0 && specData.edit == 'true'){//添加属性，已存在的标签不能删除
        //       for(var i=0;i<baseData.tagListArr.length;i++){
        //           Vue.set(baseData.tagListArr[i],'edit',false)
        //           for(var n=0;n<baseData.tagListArr[i].length;n++){
        //               Vue.set(baseData.tagListArr[i],'edit',false)
        //           }
        //       }
        //   }else if(specData.edit == null || specData.edit == undefined || specData.edit == ''){
        //       for(var i=0;i<baseData.tagListArr.length;i++){
        //           Vue.set(baseData.tagListArr[i],'edit',true)
        //           for(var n=0;n<baseData.tagListArr[i].length;n++){
        //               Vue.set(baseData.tagListArr[i],'edit',true)
        //           }
        //       }
        //   };
        if (this.GetQueryString("edit")) {
            this.edit = this.GetQueryString("edit");
        }
        // 获取所有字典集合列表
        self.ass_api.dictionaryList().then(data => {
            if (!data) return;
            self.info.languageList = data;
            if (self.edit == false) {
                self.info.languageType = self.info.languageList[0].key;
            }
        });
    }
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/common/create_bat.css";
.base_set {
    .title {
        color: #5e6a68;
        font-size: 16px;
        font-weight: 700;
        line-height: 48px;
        display: block;
        position: relative;
        padding-left: 14px;
        margin-top: 10px;
    }
    .title:before {
        position: absolute;
        left: 0;
        top: 17px;
        width: 4px;
        height: 15px;
        display: block;
        background: #07d569;
        content: "";
    }
    .title p {
        padding: 5px 23px;
        display: inline;
        font-size: 12px;
        font-weight: normal;
        color: #e07900;
    }
}
.stepitem {
    position: relative;
    margin-bottom: 15px;
    width: 860px;
    &:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
    }
    label {
        width: 100px;
        padding-right: 10px;
        text-align: right;
        float: left;
        line-height: 34px;
        color: #666;
    }
}
.radioitem {
    height: 34px;
    line-height: 14px;
    margin: 15px 0 15px 0;
    .radio {
        height: 14px;
        line-height: 14px;
        float: left;
        margin-top: 10px;
        width: auto;
        margin-left: 0;
        li {
            margin-right: 40px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            padding-left: 22px;
            display: inline-block;
            background: url("~@/assets/images/common/radio.png") no-repeat -119px
                0;
            float: left;
            width: auto;
        }
        li.selected {
            background-position: 0 0;
        }
        li.selected[type="cursor"] {
            cursor: default;
        }
    }
    label {
        width: 100px;
        padding-right: 10px;
        text-align: right;
        float: left;
        line-height: 34px;
        color: #666;
    }
}
.addtagbox {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -162px;
    margin-top: -86px;
    background: #fff;
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
    -ms-border-radius: 0 2px 2px 0;
    -o-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
    -webkit-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    -moz-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    -ms-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    -o-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
    width: 324px;
    padding: 20px 0;
    z-index: 99;
    .tagitem {
        margin-bottom: 10px;
    }
    .tagitem .error {
        margin-left: 90px;
    }
    label {
        width: 90px;
    }
    input {
        width: 215px;
        border: 1px solid #e0e0e0;
        padding: 0 10px;
        line-height: 32px;
        display: inline-block;
        font-size: 14px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        height: 34px;
    }
    input.err {
        animation: errborder 1s;
        -moz-animation: errborder 1s;
        -webkit-animation: errborder 1s;
        -o-animation: errborder 1s;
        border-color: #fbae22;
        color: #fbae22;
    }
    input.yes {
        animation: myborder 1s;
        -moz-animation: myborder 1s;
        -webkit-animation: myborder 1s;
        -o-animation: myborder 1s;
        border-color: #e0e0e0;
        color: #333;
    }
}
.checkboxitem {
    height: 34px;
    line-height: 14px;
    margin: 15px 0 15px 0;
    .checkbox {
        height: 14px;
        line-height: 14px;
        float: left;
        margin-top: 10px;
        width: auto;
        margin-left: 0;
    }
    .checkbox li {
        margin-right: 40px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        padding-left: 22px;
        display: inline-block;
        float: left;
        position: relative;
    }
    .checkbox li:before {
        content: "";
        width: 12px;
        height: 12px;
        display: block;
        background: url("~@/assets/images/common/checkbox.png") no-repeat 0 0;
        position: absolute;
        left: 0;
        top: 1px;
    }
    .checkbox li.selected:before {
        background-position: 0 -12px;
    }
    label {
        width: 100px;
        padding-right: 10px;
        text-align: right;
        float: left;
        line-height: 34px;
        color: #666;
    }
}
.tb-lt {
    margin-left: 95px;
    .btn-lf {
        margin: 10px 0 15px 0;
    }
    .btn-lf a {
        height: 35px;
        line-height: 35px;
        display: inline-block;
        padding: 0 20px;
        background: #fcad1d;
        color: #fff;
    }
    .btn-lf a:hover {
        background: #e07900;
    }
    .file {
        border: 1px dashed #eee;
        border-left: 0;
        border-right: 0;
    }
    .file dt {
        height: 45px;
        line-height: 45px;
        background: #fafafa;
        color: #969696;
        border-bottom: 1px dashed #eee;
    }
    .file dd {
        height: 50px;
        line-height: 50px;
    }
    .file dd {
        border-bottom: 1px dashed #eee;
    }
    .file ul li:nth-child(1) {
        width: 190px;
        float: left;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .file ul li:nth-child(2) {
        text-align: center;
        padding-right: 20px;
        width: 150px;
        float: right;
    }
    .file ul li:nth-child(2) a {
        color: #333;
        border: 1px solid #ececec;
        border-radius: 2px;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        display: inline-block;
        padding: 0 10px;
        border-radius: 2px;
    }
    .file ul li:nth-child(2) a:hover {
        background: #f9f9f9;
    }
    .file ul li:nth-child(2) a[type="cursor"] {
        cursor: default;
    }
    .file ul li:nth-child(2) a[type="cursor"]:hover {
        background: #fff;
    }
}
.pop {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 998;
    .btngroup {
        padding-top: 10px;
    }
    .layer {
        background: rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100%;
    }
    .show_pop {
        width: 405px;
        text-align: left;
        display: block;
        position: fixed;
        left: 50%;
        margin-left: -202px;
        top: 50%;
        margin-top: -119px;
        background: #fff;
        overflow: hidden;
        margin-top: -217px;
        .poptitle {
            line-height: 40px;
            height: 40px;
            border-bottom: 1px solid #e5e5e5;
            background: #f5f5f5;
        }
        .poptitle i {
            float: right;
            width: 12px;
            height: 12px;
            display: block;
            background: url("~@/assets/images/common/close.png") no-repeat 0 0;
            margin-top: 14px;
            margin-right: 20px;
            cursor: pointer;
        }
        .poptitle span {
            padding-left: 20px;
        }
        .popdis {
            text-align: center;
            line-height: 30px;
            padding: 24px 0;
        }
    }
    .myloc {
        height: 40px;
        padding: 0 30px;
        line-height: 40px;
        font-size: 14px;
        padding-right: 5px;
        a {
            color: #c6c6c6;
        }
        a.ainimate {
            color: #14cb6b;
        }
    }
}
.tree {
    padding: 0 30px 30px 30px;
    height: 336px;
    overflow-y: auto;
    ul {
        border-bottom: 1px solid #ececec;
    }
    ul li {
        border: 1px solid #ececec;
        border-bottom: 0;
        line-height: 40px;
        cursor: pointer;
        position: relative;
        padding-right: 44px;
    }
    ul li .father {
        position: relative;
        margin-left: 44px;
    }
    ul li .father em {
        position: absolute;
        right: 20px;
        top: 15px;
        display: none;
        width: 12px;
        height: 12px;
        background: url("~@/assets/images/common/manage/open.png") no-repeat 0 0;
    }
    ul li i {
        position: absolute;
        left: 15px;
        top: 15px;
        display: block;
        width: 12px;
        height: 12px;
        background: url("~@/assets/images/common/checkbox.png") no-repeat 0 0;
    }
    ul li.current i {
        background-position: 0 -12px;
    }
    ul li.current {
        background: #e0ffed;
    }
    ul li ul {
        border-bottom: 0;
    }
    ul li ul li {
        border-left: 0;
        border-right: 0;
        font-size: 12px;
        line-height: 34px;
    }
    ul li ul li .father {
        padding-left: 66px;
    }
}
.checkhide {
    background: #fafafa;
    border-left: 4px solid #fff;
    margin-top: 5px;
    padding: 12px 0;
    .hideline {
        height: 37px;
        line-height: 37px;
        margin-bottom: 15px;
        label {
            width: 180px;
            padding-right: 20px;
            text-align: right;
            display: inline-block;
            text-align: right;
        }
        .typeli {
            display: inline-block;
            position: relative;
            font-size: 0;
            span {
                width: 108px;
                line-height: 35px;
                background: #fff;
                height: 37px;
                border: 1px solid #ececec;
                text-align: center;
                color: #969696;
                display: inline-block;
                margin-right: 17px;
                font-size: 14px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
                border-radius: 2px;
            }
            span.hover {
                border-color: #16cb6d;
                background: #e0fdee;
                color: #16cb6d;
                position: relative;
                cursor: pointer;
            }
            span.hover:after {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 22px;
                height: 22px;
                display: block;
                content: "";
                background: url("~@/assets/images/common/work-team/task_select_ico.png")
                    no-repeat 0 0;
            }
            input {
                line-height: 17px;
                padding: 10px;
                border: 1px solid #cacaca;
                width: 233px;
            }
            i {
                font-style: normal;
                color: #999;
                position: absolute;
                left: 243px;
                top: 0;
                line-height: 37px;
                font-size: 14px;
                width: 200px;
            }
        }
        &:last-child {
            margin: 0;
        }
    }
}
.add_outtag_box {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed;
    left: 0;
    top: 0;
}
.taglist {
    display: inline-block;
    font-size: 14px;
    padding: 7px 14px;
    background: #fafafa;
    width: 760px;
    span {
        line-height: 17px;
        padding: 0 35px 0 15px;
        text-align: center;
        display: inline-block;
        margin-right: 10px;
        background: #fff;
        border: 1px solid #14cb6b;
        color: #14cb6b;
        font-size: 14px;
        position: relative;
        margin-bottom: 6px;
        i {
            display: block;
            background: url("~@/assets/images/common/work-team/close_hover.png")
                no-repeat 0 0;
            position: absolute;
            right: 11px;
            top: 3px;
            width: 10px;
            cursor: pointer;
            height: 10px;
        }
    }
    a {
        color: #14cb6b;
        padding-left: 10px;
        position: relative;
    }

    .addtagboxImp {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -162px;
        margin-top: -86px;
        background: #fcfbfb;
        -webkit-border-radius: 0 2px 2px 0;
        -moz-border-radius: 0 2px 2px 0;
        -ms-border-radius: 0 2px 2px 0;
        -o-border-radius: 0 2px 2px 0;
        border-radius: 0 2px 2px 0;
        -webkit-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
        -moz-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
        -ms-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
        -o-box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
        box-shadow: 0 0 15px rgba(3, 111, 55, 0.19);
        width: 474px;
        padding: 0px 0;
        z-index: 999;
        .tagitem {
            margin-bottom: 10px;
        }
    }
}
.addtag {
    font-size: 0;
    text-align: center;
    padding: 15px 0 20px 0;
    background-color: #fff;
    margin-top: 30px;

    span {
        display: inline-block;
        width: 90px;
        height: 34px;
        text-align: center;
        padding: 0;
        line-height: 34px;
        color: #333;
        border: 1px solid #ececec;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        font-size: 14px;
        cursor: pointer;
        margin: 0;
    }
    span:hover {
        background: #f9f9f9;
    }
    span:first-child {
        margin-right: 12px;
        background: #fcad1d;
        color: #fff;
        border: 1px solid #fcad1d;
    }
    span:first-child:hover {
        border: 1px solid #e07900;
        background: #e07900;
    }
}
</style>
